<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">

    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>Select2 :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>

    <link href="css/metro.css" rel="stylesheet">
    <link href="css/metro-icons.css" rel="stylesheet">
    <link href="css/metro-responsive.css" rel="stylesheet">
    <link href="css/metro-schemes.css" rel="stylesheet">

    <link href="css/docs.css" rel="stylesheet">

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/select2.min.js"></script>
    <script src="js/metro.js"></script>
    <script src="js/docs.js"></script>
    <script src="js/prettify/run_prettify.js"></script>
    <script src="js/ga.js"></script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <style>
        .img-flag {
            height: 16px;
        }
    </style>

    <script>
        $(function(){
            $(".js-select").select2({
                placeholder: "Select a state",
                allowClear: true
            });
        });

        function fmtState (state) {
            if (!state.id) { return state.text; }
            var $state = $(
                    '<span><img src="images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
            );
            return $state;
        }
    </script>
</head>
<body>
    <div class="container page-content">
        <h1><a href="index.html" class="nav-button transform"><span></span></a>&nbsp;Select2 <small>third-party plugin</small></h1>

        @@adsense

        <div class="margin20 no-margin-left no-margin-right sub-header text-light">
            Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
        </div>

        <div class="padding20 info">
            This is third-party plugin. To use this plugin you must <a href="https://select2.github.io/">download</a> it from the home page.
        </div>
        <br />

        <div class="example" data-text="example">
            <div class="grid">
                <div class="row cells2">
                    <div class="cell">
                        <h5>Direct init</h5>
                        <select class="js-select full-size">
                                <option></option>
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                        </select>
                    </div>
                    <div class="cell">
                        <h5>Metro UI CSS init</h5>
                        <div class="input-control full-size" data-role="select" data-placeholder="Select a state" data-allow-clear="true">
                            <select class="full-size">
                                <option></option>
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row cells2">
                    <div class="cell">
                        <h5>Metro UI CSS init with options</h5>
                        <div class="input-control full-size" data-role="select" data-template-result="fmtState" data-placeholder="Select a state">
                            <select class="full-size">
                                <option></option>
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </select>
                        </div>
                    </div>
                    <div class="cell">
                        <h5>Multiple</h5>
                        <div class="input-control full-size" data-role="select" data-multiple="true" data-placeholder="Select a state">
                            <select class="full-size">
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </select>
                        </div>
                    </div>
                </div>
                <h5>Select states</h5>
                <div class="row cells5">
                    <div class="cell">
                        <div class="input-control error full-size" data-role="select" data-template-result="fmtState" data-placeholder="error">
                            <select class="full-size">
                                <option></option>
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </select>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="input-control warning full-size" data-role="select" data-template-result="fmtState" data-placeholder="warning">
                            <select class="full-size">
                                <option></option>
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </select>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="input-control success full-size" data-role="select" data-template-result="fmtState" data-placeholder="success">
                            <select class="full-size">
                                <option></option>
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </select>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="input-control info full-size" data-role="select" data-template-result="fmtState" data-placeholder="info">
                            <select class="full-size">
                                <option></option>
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </select>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="input-control required full-size" data-role="select" data-template-result="fmtState" data-placeholder="required">
                            <select class="full-size">
                                <option></option>
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <p class="padding10 bg-grayLighter">
            <span class="tag alert">Important!</span> States for select object displayed only for select placed in <span class="tag">input-control</span> container.
        </p>

        <h3>How to use</h3>

        <div class="example" data-text="code">
            <h5>Include Select2 plugin</h5>
            <pre class="prettyprint linenums"><code>
                &lt;script src="select2.min.js"&gt;&lt;/script&gt;
            </code></pre>
            <h5>Direct initialization</h5>
            <pre class="prettyprint linenums"><code>
                &lt;select id="select"&gt;
                    &lt;option&gt;option&lt;/option&gt;
                    ...
                    &lt;option&gt;option&lt;/option&gt;
                &lt;/select&gt;

                &lt;script&gt;
                    $(function(){
                        $("#select").select2();
                    });
                &lt;/script&gt;
            </code></pre>
            <h5>Metro UI CSS declarative style</h5>
            <pre class="prettyprint linenums"><code>
                &lt;div class="input-control" data-role="select"&gt;
                    &lt;select&gt;
                    &lt;option&gt;option&lt;/option&gt;
                    ...
                    &lt;option&gt;option&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;

                &lt;div class="input-control error" data-role="select"&gt;
                    &lt;select&gt;
                    &lt;option&gt;option&lt;/option&gt;
                    ...
                    &lt;option&gt;option&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
            </code></pre>
            <h5>Metro UI CSS declarative style with options</h5>
            <pre class="prettyprint linenums"><code>
                &lt;div class="input-control" data-template-result="fmtState" data-role="select"&gt;
                    &lt;select&gt;
                        &lt;option&gt;option&lt;/option&gt;
                        ...
                        &lt;option&gt;option&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;

                &lt;script&gt;
                    function fmtState (state) {
                        if (!state.id) { return state.text; }
                        var $state = $(
                            '&lt;span&gt;'+
                            '&lt;img src="images/flags/' +
                            state.element.value.toLowerCase() +
                            '.png" class="img-flag" /&gt; ' +
                            state.text +
                            '&lt;/span&gt;'
                        );
                        return $state;
                    }
                &lt;/script&gt;
            </code></pre>
        </div>
    </div>

    @@hit

</body>
</html>